<template>
  <a-card
    :title="t('dashboard.monitor.complteRateChartTitle')"
    :bordered="false"
    :loading="loading"
  >
    <LiquidChart v-bind="chartConfig"></LiquidChart>
  </a-card>
</template>
<script lang='ts'>
import { defineComponent, ref } from "vue";
import { LiquidChart } from "@opd/g2plot-vue";
import { useI18n } from "vue-i18n";
export default defineComponent({
  name: "MonitorCompletionRate",
  components: {
    LiquidChart,
  },
  setup() {
    const { t } = useI18n();
    const chartConfig = {
      height: 183,
      percent: 0.45,
      statistic: {
        title: {
          formatter: () => t("dashboard.monitor.completRate"),
          style: () => ({
            fontSize: "18px",
          }),
        },
      },
      outline: {
        border: 4,
        distance: 8,
      },
      wave: {
        length: 128,
      },
    };
    const loading = ref(true);
    setTimeout(() => {
      loading.value = false;
    }, 1500);
    return {
      t,
      chartConfig,
      loading,
    };
  },
});
</script>